<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!doctype html>
<html>
	<head>
		<title>操作记录</title>
		<base href="<%=basePath%>" />
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="apple-touch-icon-precomposed" href="i/app-icon72x72@2x.png">
		<meta name="apple-mobile-web-app-title" content="Amaze UI" />
		<link rel="stylesheet" href="layui/css/layui.css">
		<style type="text/css">
		</style>

	</head>

	<body>
	    <br/>
		<form class="layui-form" action="" onsubmit='return false;'>
			<div class="layui-form-item">
				<div class="layui-inline">
					<div class="layui-input-inline">
						<input type="text" name="UserId" id="UserId" placeholder="玩家ID" autocomplete="off" class="layui-input">
					</div>
				</div>
				
				<div class="layui-inline">
					<div class="layui-input-inline">
						<select name="LogType" id="LogType">
							<option value="0">全部交易</option>
							<option value="1">存入</option>
							<option value="2">取出</option>
							<option value="3">赠送</option>
							<option value="4">接收</option>
						</select>
					</div>
				</div>


				<div class="layui-inline">
					<div class="layui-input-inline">
						<button class="layui-btn layui-btn-normal" data-type="reload" lay-filter="findID" id="findID">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</div>
		</form>
		<div class="layui-form" id="table-list">
			<table class="layui-table" lay-skin="nob" id="Treasury" lay-filter="Treasury"></table>
		</div>
        
        <script type="text/html" id="logType">
            {{# if(d.LogType == 1){ }}
                <a class="layui-btn layui-btn-xs">存入</a>
            {{# }else if(d.LogType == 2){ }}
                <a class="layui-btn layui-btn-danger layui-btn-xs">取出</a>
            {{# }else if(d.LogType == 3){ }}
                <a class="layui-btn layui-btn-danger layui-btn-xs">赠送</a>
            {{# }else if(d.LogType == 4){ }}
                <a class="layui-btn layui-btn-xs">接受</a>
            {{# } }}
        </script>
        
        <script type="text/html" id="ReferUserId">
            {{# if(d.ReferUserId ==0){ }}
                <span>\</span>
            {{# }else{ }}
                <span>{{ d.ReferUserId }}</span>
            {{# } }}
        </script>
        
        <script type="text/html" id="ReferNickname">
            {{# if(d.ReferNickname == ""){ }}
                <span>\</span>
            {{# }else{ }}
                <span>{{ d.ReferNickname }}</span>
            {{# } }}
        </script>
        
        <script type="text/html" id="operate">
            <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
        </script>
        
		<script src="js/jquery.min.js"></script>
		<script src="layui/layui.js"></script>
		<script src="js/frame/form_upload.js"></script>
		<script src="js/frame/datagrid.js"></script>
		<script src="js/common/monitor_back.js"></script>

		<script>
			layui.use(['layer', 'form', 'table', 'laytpl'], function() {
				var layer = layui.layer,
					form = layui.form,
					table = layui.table,
					laytpl = layui.laytpl;

				layer.config({
					extend: 'MySkin/style.css'
				});

				//加个table表
				table.render({
					elem: '#Treasury',
					url: 'treasury/list',
					method: 'post',
					title: '金库日志列表',
					totalRow: true,
					autoSort: false,
					cellMinWidth: 50, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
					id: 'AllTable',
					request: {
						pageName: 'PageIndex',
						limitName: 'PageCount'
					},
					where: {
						UserId: $('#UserId').val(),
						LogType : $('#LogType  option:selected').val()
					},
					cols: [[
						{field: 'UserId',title: '玩家ID'}, 
						{field: 'Nickname',title: '玩家昵称'}, 
						{field: 'LogType',title: '交易类型',templet:'#logType'},
						{field: 'ItemName',title: '物品名称'}, 
						{field: 'OriginCount',title: '起始数量'},
						{field: 'Delta',title: '变化量'}, 
						{field: 'ReferNickname',title: '关联玩家昵称',templet:'#ReferNickname'}, 
						{field: 'ReferUserId',title: '关联玩家ID',templet:'#ReferUserId'}, 
						{field: 'CreateTime',title: '创建时间'},
						{fixed: 'right',title: '操作',align:'center',toolbar:'#operate'}
						]],
					page: true, //分页
					response: {
						statusCode: 200
						//重新规定成功的状态码为 200，table 组件默认为 0
					},
					parseData: function(res) { //将原始数据解析成 table 组件所规定的数据
						return {
							"code": res.status, //解析接口状态
							"msg": res.message, //解析提示文本
							"count": res.count, //解析数据长度
							"data": res.data //解析数据列表
							//解析数据列表
						};
					}
				});
                
				table.on('tool(Treasury)',function(obj){
					if (history.state == null){
						pushHistory();
					}
					var data = obj.data;
					var userId = data.UserId;
					if(obj.event === 'edit'){
						var index = layer.open({
							type:2,
							shadeClose:true,
							shade:0.5,
							area: ['1500px', '800px'],
							title: '玩家金库',
							skin: 'layer-ext-yourskin',
							content: 'treasury/findUserId',
							success: function(layero, index) {
								var body = layer.getChildFrame("body", index);
								// 取到弹出层里的元素，并把编辑的内容放进去
								body.find("#UserId").val(userId); 
							},
							cancel:function () {
								window.history.back();
							}
						});
					}
				});
				
				//根据条件查询表格数据重新加载
				var active = {
					reload: function() {
						//获取用户名
						//执行重载
						table.reload('AllTable', {
							page: {
								curr: 1 //重新从第 1 页开始
							}
							//根据条件查询
							,
							where: {
								UserId: $('#UserId').val(),
								LogType : $('#LogType').val()
							}
						});
						return false;
					}
				};
				//点击搜索按钮根据用户名称查询
				$('#findID').on('click',
					function() {
						var type = $(this).data('type');
						active[type] ? active[type].call(this) : '';
					});

                setInterval(function(){
                	table.reload('AllTable', {});
                },60000);
                
                table.on('sort(findID)',function(obj){
                	table.reload('AllTable',{
                		initSort:obj //记录初始排序，如果不设的话，将无法标记表头的 排序状态 
                		,where : {
                			field:obj.field    //排序字段
							,order:obj.type    //排序方式
                	    }
                	});
                });
			});
		</script>
	</body>
</html>
